<?php
//Código para el idioma
    if($leng == "en")
    {
        include_once APP_PATH.'libs/en.php';
    }
    else
    {
        include_once APP_PATH.'libs/es.php';
    }
    
 ?>   
<div><?php View::content() ?></div> 

<script type="text/javascript">
    //Validación con jquery
    $(document).ready(function () {
        //Borrar mensaje de error si el usuario a llenado el campo
        $(".palabra").keyup(function()
        {   
            if( $(".palabra").val() != "" )
            {
                $(".errorVal").fadeOut();
        
                //AJAX COMIENZO
                $.ajax
                ({
            
                    type: "POST",
                    data : {
                        opcion: $("input[name='optionsRadios']:checked").val(),
                        string: $(".palabra").val()
                    },            
                    url: '<?php echo PUBLIC_PATH; ?>ajax/solicitud_buscar.php',
                    dataType: "json",
                    success: function(data)
                    {
                        if (data != null && data.length > 0)
                        {
                            var count = 0;
                            //console.log(data);
                            $(".table-condensed tbody").empty();
                            while (count < data.length)
                            {
                                $(".table-condensed tbody").append("<tr>");
                                $(".table-condensed tbody").append("<td>"+data[count]['id']+"</td>");
                                $(".table-condensed tbody").append("<td>"+data[count]['username_usu']+"</td>");
                                $(".table-condensed tbody").append("<td>"+data[count]['fecha_sol']+"</td>");
                                $(".table-condensed tbody").append("<td>"+data[count]['estado_sol']+"</td>");
                                $(".table-condensed tbody").append("<td>"+data[count]['tipo_sol']+"</td>");
                                $(".table-condensed tbody").append("<td>"+data[count]['mail_sol']+"</td>");
                                $(".table-condensed tbody").append("<td><a href='/trunk/qualitytours/solicitud/administrar/"+data[count]['id'] +"/"+data[count]['id_usu'] +"/<?php echo $leng; ?>'><button class='btn btn-small btn-info' type='button'>Administrar</button></a></td>");                     
                                
                                $(".table-condensed tbody").prepend("</tr>");
                                count++;
                            }
                        }
                        else 
                        {
                            $(".table-condensed tbody").empty();
                            $(".table-condensed tbody").append('<td><b><?php echo $solicitud_buscar_mensaje1; ?></b></td>');
                        }
                    } // cierre success
            
                    //DESCOMENTAR LA SIGUIENTE LINEA SI QUEREEMOS VER ALERTS SI HAY ERROR EN LA SOLICITUD AJAX
                    //,error: function (xhr, ajaxOptions, thrownError){alert(xhr.status+' '+thrownError);}
        
                }); //cierre ajax
                //AJAX FIN
                return false;
            }
        });
    });
</script>

<!--
El CSS a continuación da estilo a los mensaje de error en la validación
, no se usó "error" ya que kumbia ya tiene un estilo para esa clase, en su
reemplazo se uso 'errorVal'.
-->

<style>
    .errorVal{
        background-color: #BC1010;
        padding: 6px 12px;
        border-radius: 4px;
        color: white;
        font-weight: bold;
        margin-left: 16px;
        margin-top: 6px;
        position: absolute;
    }
    .errorVal:before{ /* Este es un truco para crear una flechita */
        content: '';
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid #BC1010;
        border-left: 8px solid transparent;
        left: -16px;
        position: absolute;
        top: 5px;
    }
</style>


<div align="center">
    <h1 style="font-family: SF"> <?php echo $solicitud_buscar_titulo; ?> </h1>
    <table>
        <tr> 
            <td><?php echo $usuario_buscar_titulo; ?>&nbsp;&nbsp;</td>
            <td><?php echo Form::text('usuario', "class='span3 palabra' placeholder='".$usuario_buscar_ingrese_usuario ."'") ?></td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="accordion" id="accordion2">
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <center><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                                    <?php echo $usuario_buscar_mas_opciones; ?>
                                </a></center>
                        </div>
                        <div id="collapseOne" class="accordion-body collapse">
                            <div class="accordion-inner">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th><center><?php echo $solicitud_buscar_mensaje2; ?></center></th>
                                    <th><center><?php echo $solicitud_buscar_mensaje3; ?></center></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <label class="radio">
                                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="Rechazada">
                                                    <?php echo $solicitud_buscar_mensaje4; ?>
                                                </label>
                                                <label class="radio">
                                                    <input type="radio" name="optionsRadios" id="optionsRadios3" value="Cancelada">
                                                    <?php echo $solicitud_buscar_mensaje5; ?>
                                                </label>  
                                            </td>
                                            <td>
                                                <label class="radio">
                                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="modificaciones_sol">
                                                    <?php echo $solicitud_buscar_mensaje6; ?>
                                                </label>
                                                <label class="radio">
                                                    <input type="radio" name="optionsRadios" id="optionsRadios3" value="mail_sol">
                                                    <?php echo $solicitud_buscar_mensaje7; ?>
                                                </label> 
                                            </td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>

    <!--Resultado de la busqueda-->
    <br>
    <br>
    <h4> <?php echo $solicitud_buscar_mensaje8; ?> </h4>
    <br>
    <table class="table table-condensed">
        <thead>
            <tr>
                <!-- cabecera de la tabla-->
                <th><?php echo $solicitud_buscar_codigo; ?></th>
                <th>Username</th>
                <th><?php echo $solicitud_buscar_fecha; ?></th>
                <th><?php echo $solicitud_administrar_estado; ?></th>
                <th><?php echo $servicio_ingresar_tipo; ?></th>
                <th><?php echo "Mail"; ?></th>
                <th> </th>
                <th> </th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>